<template>
  <div>
    <el-dialog
      :title="title"
      top="15vh !important"
      width="70%"
      :visible="true"
      @close="handleCancel"
    >
      <el-form
        :model="updateParams"
        label-width="120px"
        ref="updateForm"
        :rules="updateRules"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="计划名称" prop="planName">
              <el-input
                :disabled="isView"
                
                v-model="updateParams.planName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申报单位" prop="companyName">
              <el-input
                
                :disabled="isView"
                v-model="updateParams.companyName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplier">
              <el-input
                
                disabled
                v-model="updateParams.supplier"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                :disabled="isView"
                v-model="updateParams.projectName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="钢材计划总量" prop="total">
              <el-input
                :disabled="isView"
                v-model="updateParams.total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建筑面积" prop="area">
              <el-input
                v-model="updateParams.area"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="plan-detail">
          <div class="title">计划详情</div>
          <div class="opt-btn">
            <el-button
              type="primary"
              size="small"
              :disabled="isView"
              @click="handleAddPlanDetail()"
            >
              新增
            </el-button>
            <el-button
              type="primary"
              size="small"
              :disabled="this.selectedData.length !== 1 || isView"
              @click="handleEditPlanDetail()"
            >
              编辑
            </el-button>
          </div>
          <div class="content">
            <el-table
              :data="planData"
              @selection-change="handleSelectionChange"
              @row-click="handleRowClick"
              height="200px"
            >
              <el-table-column
                type="selection"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                align="center"
                label="序号"
                prop="sn"
              ></el-table-column>
              <el-table-column
                align="center"
                label="商品名称"
                prop="name"
              ></el-table-column>
              <el-table-column
                align="center"
                label="规格"
                prop="specification"
              ></el-table-column>
              <el-table-column
                align="center"
                label="预算(预计数量)"
                prop="budget"
              ></el-table-column>
              <el-table-column
                align="center"
                label="计划到场日期"
                prop="planTime"
              ></el-table-column>
              <el-table-column
                align="center"
                label="使用部位"
                prop="part"
              ></el-table-column>
              <el-table-column
                align="center"
                label="备注"
                prop="remark"
              ></el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="现场主管" prop="manager">
                  <el-input
                    
                    :disabled="isView"
                    v-model="updateParams.manager"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目经理" prop="pm">
                  <el-input
                    
                    :disabled="isView"
                    v-model="updateParams.pm"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="材料员" prop="materialMan">
                  <el-input
                    
                    :disabled="isView"
                    v-model="updateParams.materialMan"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div class="img-info">
        <div class="title">图片信息</div>
        <div class="content">
          <el-upload
            :disabled="isView"
            name="files"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleImageChange"
            :auto-upload="false"
            :file-list="updateParams.fileList"
            list-type="picture-card"
            multiple
          >
            <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog
            :modal-append-to-body="false"
            :visible.sync="previewImgDialog"
            width="500px"
          >
            <img width="100%" :src="previewImgSrc" alt="" />
          </el-dialog>
        </div>
      </div>
      <div class="update-btn">
        <el-button type="primary" size="small" @click="handleUpdateConfirm">
          确定
        </el-button>
        <el-button type="warning" size="small" @click="handleCancel">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :modal-append-to-body="false"
      :title="isDetailAdd ? '新增计划详情' : '编辑计划详情'"
      top="15vh !important"
      width="70%"
      :visible="detailDialog"
      @close="detailDialog = false"
    >
      <el-form :model="detailParams" label-width="120px" ref="detailParams">
        <el-row :gutter="20">
          <!-- <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                
                v-model="detailParams.projectName"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="钢材总量计划" prop="total">
              <el-input  v-model="detailParams.total"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="建筑面积" prop="area">
              <el-input  v-model="detailParams.area"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品名称" prop="name">
              <el-input  v-model="detailParams.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格" prop="specification">
              <el-input
                
                v-model="detailParams.specification"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预算(预计数量)" prop="budget">
              <el-input  v-model="detailParams.budget"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="8">
            <el-form-item label="形象进度" prop="progress">
              <el-input  v-model="detailParams.progress"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="计划到场日期" prop="planTime">
              <el-date-picker
                v-model="detailParams.planTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用部位" prop="part">
              <el-input  v-model="detailParams.part"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            style="width: 800px"
            type="textarea"
            v-model="detailParams.remark"
          ></el-input>
        </el-form-item>
        <div class="update-btn">
          <el-button
            type="primary"
            size="small"
            @click="handleUpdateDetailConfirm"
          >
            确定
          </el-button>
          <el-button type="warning" size="small" @click="detailDialog = false">
            取消
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
export default {
  mixins: [tableMixin],
  props: {
    updateParams: {
      type: Object,
      require: true,
    },
    isAdd: {
      type: Boolean,
      require: true,
    },
    isView: {
      type: Boolean,
      require: true,
    },
  },
  computed: {
    title() {
      const currentTitle = this.isView
        ? "计划详情"
        : this.isAdd
        ? "新增计划详情"
        : "编辑计划详情";
      return currentTitle;
    },
  },
  data() {
    return {
      previewImgDialog: false,
      previewImgSrc: "",
      planData: [],
      updateRules: {
        planName: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入计划名称！",
          },
        ],
        companyName: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入申报单位！",
          },
        ],
      },
      detailDialog: false,
      isDetailAdd: true,
      detailParams: {},
    };
  },
  methods: {
    handleAddPlanDetail() {
      this.isDetailAdd = true;
      this.detailDialog = true;
    },
    handleEditPlanDetail() {
      this.isDetailAdd = false;
      this.detailParams = this.selectedData[0];
      this.detailDialog = true;
    },
    handleImageChange(file, fileList) {
      this.updateParams.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      this.previewImgSrc = file.url;
      this.previewImgDialog = true;
    },
    handleRemove(file) {
      const delIndex = this.updateParams.fileList.findIndex(
        (item) => item.uid === file.uid
      );
      this.updateParams.fileList.splice(delIndex, 1);
    },
    handleUpdateConfirm() {
      this.$refs.updateForm.validate((value) => {
        if (value) {
          this.$emit("confirm");
        }
      });
    },
    handleCancel() {
      this.$emit("cancel");
    },
    handleUpdateDetailConfirm() {
      this.detailParams.sn = this.isDetailAdd
        ? this.planData.length
        : this.detailParams.sn;
      const updateData = this.isDetailAdd
        ? [...this.planData, { ...this.detailParams }]
        : [...this.planData];
      this.planData = updateData;
      console.log(this.planData);
      this.detailDialog = false;
    },
  },
};
</script>

<style scoped lang="scss">
.opt-btn {
  padding: 20px;
}
.img-info {
  .title {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}
.update-btn {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
</style>